<template>
  <j-modal
    :title="'数据清洗'"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :fullscreen="false"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    cancelText="关闭"
  > 
    <a-spin :spinning="confirmLoading"> 
       <j-form-container>
        <!-- <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          class="j-table-force-nowrap"
          :scroll="{ x: true }"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
          :loading="loading"
          @change="handleTableChange"
        >
        </a-table> -->
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row v-for="obj in paramList"> 
          <a-col :span="8">
             <a-form-model-item label="属性" :labelCol="labelCol" :wrapperCol="wrapperCol"> 
          <a-input-search
            placeholder="选择属性"
            readOnly
            v-model="obj.propName"
            style="width: 220px"
            @search="doSelectDataPropertyList(obj.key)"
          /> 
        </a-form-model-item> 
<!--         
            <a-form-model-item label="属性" :labelCol="labelCol" :wrapperCol="wrapperCol"> 
               <a-select  placeholder="请选择属性"  v-model="obj.fieldName">
                  <a-select-option :value="undefined">请选择</a-select-option>
                  <a-select-option v-for="item in fieldNameList" :key="item.code" :value="item.code">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
            </a-form-model-item> -->
          </a-col>
           <a-col :span="8">
            <a-form-model-item label="符合条件" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="obj.condition" placeholder="请输入值"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="设置为" :labelCol="labelCol" :wrapperCol="wrapperCol">
               <a-input v-model="obj.fieldValue" placeholder="请输入值"></a-input> 
            </a-form-model-item>
          </a-col>
          <a-col :span="2">
            <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol" style="text-align: center;"> 
              <a-popconfirm title="是否要删除此行？" @confirm="removeRow(obj.key)"><a>删除</a></a-popconfirm>
            </a-form-model-item>
          </a-col>
        </a-row>
         <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newRow">新增</a-button>
        </a-form-model>
          <select-data-property-list-modal ref="selectDataPropertyList" @ok="selectDataPropertyOk" />
       </j-form-container>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction, postAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import connector from '@antv/data-set/lib/connector/geo-graticule'
import SelectDataPropertyListModal from '@/views/corp/dataProperty/SelectDataPropertyList'
export default {
  name: 'ExtractModal',
  mixins: [JeecgListMixin],
  components: {
    JMultiSelectTag,
    SelectDataPropertyListModal
  },
  data() {
    return {
      title: '',
      dataSetId:0,
      width: 950,
      height: 500,  
      visible: false,
      disableSubmit: false,
      // url: {
      //   list: "/dataHistory/dataHistory/list"
      // },
      model: {
        fieldName:"",
        fieldValue: '',
        condition:'',
      },
      paramList:[],
      selectedKey:'',
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        }
      ],
      fieldNameList:[],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
      confirmLoading: false, 
      validatorRules: {
        fieldName: [{ required: true, message: '请输入属性!' }],
        fieldValue: [{ required: true, message: '请输入值!' }],
      },
    }
  },
  methods: { 
     show(id) {  
      this.columns =  []
      this.dataSource =  []
      this.model.fieldName ='';
      this.model.fieldValue =''
      this.dataSetId = id;
      this.paramList=[];
      this.newRow();
      this.loadDataProperty() 
    },
    loadDataProperty() {
      var that = this
      this.confirmLoading = true
      httpAction('/dataProperty/dataProperty/list?pageSize=99999', {}, 'get')
        .then((res) => {
          if (res.success) {
            that.dataPropertyList = res.result.records
            //that.loadDetailData()
             this.visible = true
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.confirmLoading = false
        })
    },
    getPropertyText(key) {
      let filterList = this.dataPropertyList.filter((item) => item.propNo == key)
      if (filterList.length > 0) {
        return filterList[0].propName
      }
      return key
    },  
    loadDetailData() { 
      return
      var that = this;
      this.visible = true
      this.confirmLoading = true
      httpAction('/dataSet/dataSet/queryByIdQuality?id='+that.dataSetId, {}, 'get')
        .then((res) => { 
          if (res.success) { 
            var list = []
            //var data = res.result.records
            var data = res.result 
            this.fieldNameList=[];
            this.columns =[{
                title: '',
                dataIndex: 'type',
                key: 'type',
                width: 60,
                align: 'center', 
              }]
            for (const key in data['null_values']) {
              that.columns.push( {
                  title: that.getPropertyText(key),
                  align: 'center',
                  dataIndex: key,
              }) 
              that.fieldNameList.push({code:key,name:that.getPropertyText(key)})
            } 
            data['null_values']['type']='NULL值数量'
            that.dataSource = [data['null_values']];
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.confirmLoading = false
        })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      if(this.paramList.length==0){
        that.$message.warn(`请选择属性`)
        return;
      }
      var result = true;
      this.paramList.forEach((e) => {
             if(e.fieldName==''|| e.fieldValue=='' || e.condition ==''){
              result = false;
                return false;
             }
      })
      if(!result){
         this.$message.warn(`属性、值不能为空，请检查`)
         return;
      }

      that.dsUpdate(that.paramList.pop()) 
    }, 
    dsUpdate(obj){
          var that = this;
          that.confirmLoading = true
          var condition = obj.fieldName + obj.condition
          postAction('/dataSet/dataSet/dsUpdate?dataSetId='+that.dataSetId+'&fieldName='+obj.fieldName+'&fieldValue='+obj.fieldValue+'&condition='+ condition, {}).then(res => {
              if (res.success) {
                  if(that.paramList.length>0){
                    that.dsUpdate(that.paramList.pop()); 
                  }else{
                    that.$message.success("操作成功");
                  }
              } else {
                this.$message.warn(`保存失败：` + res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              this.loading = false
            })
    },
    handleCancel() {
      this.close()
    },
    newRow() {
      // 通过时间戳生成 UUID
      let uuid = Math.round(new Date().getTime()).toString()
      console.log('uuid: ' + uuid)
      this.paramList.push({
        key: uuid,  
        propName:"",
        fieldName:"",
        fieldValue: '',
        condition:'',
      })
    },
    removeRow(key) { 
      this.paramList = this.paramList.filter((item) => item.key !== key)
    },
     doSelectDataPropertyList(key) {
      this.selectedKey = key;
      this.$refs.selectDataPropertyList.show(this.propType)
    },
    selectDataPropertyOk(obj) {
      var that = this;
      var obj2 = this.paramList.filter(item =>item.key == that.selectedKey)[0];
      obj2.fieldName = obj.propNo
      obj2.propName = obj.propName
    },
  },
}
</script>